<!DOCTYPE html>
<html dir="ltr">
<head>
    <meta charset="utf-8">
    <title>Go Microservices Example</title>
    <link rel="stylesheet" href="/stylesheets/main.css">
</head>
<body>
    <div id="map"></div>
    <script>
        var points = {};
        points['San Francisco'] = [37.7879, -122.4075]
        points['Los Angeles'] = [37.7879, -122.4075]

        function initMap() {
            var infowindow = new google.maps.InfoWindow();

            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 13,
                center: new google.maps.LatLng(
                    points['San Francisco'][0], 
                    points['San Francisco'][1]
                )
            });

            google.maps.event.addListener(map, 'click', function () {
                infowindow.close();
            });

            map.data.addListener('click', function (event) {
                infowindow.setContent(event.feature.getProperty('name') + "<br>" + event.feature.getProperty('phone_number'));
                infowindow.setPosition(event.latLng);
                infowindow.setOptions({ pixelOffset: new google.maps.Size(0, -34) });
                infowindow.open(map);
            });

            map.data.loadGeoJson('/hotels?inDate=2015-04-09&outDate=2015-04-10');
        }
    </script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&callback=initMap" async defer></script>
</body>
</html>
